<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>我的装修</title>
    <meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604068_mskca9dc7wcm1jor.css" />

    <script src="/static/js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>

    <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/demos.css">

    <script src="/static/jquery-weui/js/jquery-2.1.4.js"></script>
    <script src="/static/jquery-weui/js/fastclick.js"></script>

    <script src="/static/jquery-weui/js/jquery-weui.js"></script>
    <link rel="stylesheet" href="/static/mui/css/mui.css" />

    <style>

        .weui-navbar__item.weui-bar__item--on {
            color:#fe8200 ;
            background-color: #f1f1f1;
        }
        button{
            background-color: #ffffff;
            color: black;
            border: 1px solid  #fe8200;
            width: 60px;
            height: 30px;
            border-radius: 5px;
        }

        .workerBox1{
            margin-top: 43px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            overflow: auto;

        }
        .headTitle {
            position: fixed;
            border: 1px solid #f4f4f4;
            border-top: none;
            border-left: none;
            border-right: none;
            background: #fff;
            width: 100%;
            height: 44px;
            line-height: 44px;
        }
        .head {
            position: absolute;
            width: 100%;
            max-width: 640px;
            right: 0;
            margin: 0 auto;
            height:44px;
            background: rgb(255, 255, 255);
            top: 0;
            left: 0;
            z-index: 3;
        }
        .head .title1 {
            text-align: center;
            font-size: 17px;
            margin: 0 8%;
            font-style: normal;
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 100%;


        }
        .head a img {
            float: left;
            display: block;
            width: 100%;
            width: 10px;
            height: 16px;
            margin-left: 5%;
            margin-top: 14px;
        }
        .sousuo{
            position: absolute;top:0px;right:4%;color: black
        }
        .weui-navbar__item:after {
            content: " ";
            position: absolute;
            right: 0;
            top: 0;
            width: 1px;
            bottom: 0;
            border-right: 0px solid #ccc;
            color: #ccc;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transform: scaleX(.5);
            transform: scaleX(.5);
        }
        /*头部背景去除*/
        .weui-navbar__item.weui-bar__item--on {
            color: #fe8200;
            background-color: #ffffff;
        }

        .ss{
            background-color: #fe8200;
            color: white;
            border: 1px solid  #fe8200;
            width:15%;
            height: 25px;
            border-radius: 5px;
        }
        ::-webkit-input-placeholder{
            font-size:13px;
        }
        .list_word {
            color: #999999;
            font-size: 12px;
        }

        .list_word1 {
            color: #000;
            font-size: 12px;
        }
    </style>

</head>

<body >

<header class="head headTitle"   style="position: fixed;top: 0px;">
    <a class="back"   href="{:url('/home/my/my')}" ><img src="/static/images/back_gray.png"></a>
    <h6 class="title1"   style="line-height: 44px">我的装修</h6>
</header>
<div class="weui-tab">

    <div class="weui-tab__bd"   id="app">
        <div class="weui-tab__bd-item weui-tab__bd-item--active">
            <section   class="workerBox1" >

                <div  v-for="(item,index) in items"    style="height: 140px;clear: both;background: #ffffff;margin-top: 5px">
                    <div style="height: 100px;border-bottom: 0.01rem solid #f4f4f4;">
                        <a  href="#"   style="color: black" >
                            <div   style="width:40%;float: left;">
                                <img  style="width: 90%;height: 90px;padding: 5px"   :src="item.project_picture">
                                <!--<img style="width: 90%;height: 90px;padding: 5px"src="/static/images/bj1.jpg">-->
                            </div>
                            <div style="  width: 55%;float: left;padding: 5px;margin-top: 15px;">
                                <div class="mui-row" style="margin-top: 5px">
                                    <div class="mui-col-xs-5 list_word">阶段：</div>
                                    <div class="mui-col-xs-7 list_word1">{{item.title}}</div>
                                    <div class="mui-col-xs-5 list_word">状态：</div>
                                    <div v-if="item.status==0" class="mui-col-xs-7 list_word1">待发布</div>
                                    <div v-if="item.status==1" class="mui-col-xs-7 list_word1">竞标中</div>
                                    <div v-if="item.status==2" class="mui-col-xs-7 list_word1">施工中</div>
                                    <div v-if="item.status==3" class="mui-col-xs-7 list_word1">已完成</div>

                                </div>
                            </div>
                        </a>
                    </div>

                    <div style="height: 40px;line-height: 40px;margin-top: 5px">
                        <a v-if="" :data_id="item.id" style="float: right;margin-right: 10px"  onclick="hre(this)">
                            <button >评价</button>
                        </a>
                        <a  style="float: right;margin-right: 10px">
                            <button>已评价</button>
                        </a>
                    </div>

                </div>


                <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>

                <div class="weui-cells__title"  v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>

            </section>
        </div>

    </div>

</div>
<!--搜索框-->
<!--<div class="workerSearch"   style="position: fixed; top: 45px;background:#ffffff;width: 100%; ">-->
    <!--<form action="/workerInfo/" id="caseQuery">-->
        <!--<input name="category" type="hidden">-->
        <!--<div class="box"  >-->
            <!--<div class="top"   style="padding: 15px  5px 5px  5px;">-->
                <!--<div class="searchWrap">-->
                    <!--<input    style="width:80%;margin-left: 3%" type="text" name="name" placeholder="请输关键字查询" value="">-->
                    <!--<button   class="ss" id="searchButton" style="height: 40px;">查询</button>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</form>-->
<!--</div>-->

<script>

    //    以下为参考示例
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 10,

        }
    });

    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist();
    });

    $(".workerBox1").infinite().on('infinite', function () {
        console.log("加载")
        loadlist();
    });

    //ajax加载数据
    function loadlist() {

        if(!app.is_loading&&app.is_none!=true){
            app.is_loading = true;
            $.post('my_decoration', {page: app.cur_page, limit: app.limit}, function (res) {
                console.log(res);
                app.is_loading = false;
                if (res.count > 0) {
                    $('.workerBox1').show();
                    app.cur_page++;
                    for(var index in res.data){
                        app.items.push(res.data[index]);
                    }
//                app.items=res.data;
                } else {
                    app.is_none = true;
                }

            });
        }

    }

    function hre(that) {
        console.log("232");
        var id=$(that).attr('data_id');
        console.log(id);
        var s="my_decoration_detail?id="+id;
        console.log(s+'111');
        location.href=s;
    }

</script>



</body>



</html>
